<template>
  <div>
    <el-row style="background-color: black;opacity:0.85;height: 85px" >
      <el-col>
        <div class="header-main" >
          <el-row :span="25" type="flex" justify="space-between" style="height: 85px">
            <el-col :span="1" style="margin-left: 20px">
              <el-image :src="require('@/assets/icon2.png')" style="padding-top: 10px"></el-image>
              <span style="color:white;font-size: 20px;position: absolute;margin-top: 30px;padding-left: 10px;">调查问卷系统</span>
            </el-col>
            <el-col :span="2" style="text-align:center;padding-top: 10px;padding-left: 650px" >
              <el-button size="default" style="position: absolute;margin-top: 10px;margin-left:250px;text-align: center" text @click="login()">登录</el-button>
            </el-col>
            <el-col :span="4" style="text-align:center;padding-top: 10px" >
              <el-button  size="default" style="position: absolute;margin-top: 10px;margin-right: 30px;text-align: center" text @click="reg()">立即注册</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-carousel :interval="4000" height=800px indicator-position="none">
    <el-carousel-item v-for="item in imagesBox" :key="item.id" style="width: 100%">
      <img :src="item.idView" class="image" style="width: 1400px; height: 100%">
    </el-carousel-item>
  </el-carousel>

</template>

<script>
export default {
  name: "carousel",
  data() {
    return {
      imagesBox: [{id: 0, idView: require("../assets/1.png")},
        {id: 1, idView: require("../assets/2.png")},
        {id: 2, idView: require("../assets/3.png")},
        {id: 3, idView: require("../assets/4.png")},],
      fiveNews: []
    }
  },
  methods:{
    login(){
      this.$router.push('/login')
    },
    reg(){
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>

</style>